<template>
  <NavBar>支付结果</NavBar>
  <div class="payresult-content">
    <img v-if="orderInfo?.payState == 1" src="@/assets/imgs/pages/vip/zfjg-cg.png" class="payStateImg">
    <img v-else src="@/assets/imgs/pages/vip/zfjg-sb2.png" class="payStateImg">

    <div v-if="orderInfo?.payState == 1" class="payStateText">支付成功 !</div>
    <div v-else class="payStateText">支付失败 !</div>

    <div class="payInfoBox">
      <div class="payMoney">
        ￥<span>{{ orderInfo?.amount }}</span>
      </div>
      <div class="hr"></div>
      <div class="payInfo">订单编号：<span>{{ orderInfo?.orderSn }}</span></div>
      <div class="payInfo">下单时间：<span>{{ orderInfo?.payTime }}</span></div>
      <div class="payInfo">支付方式：<span>{{ orderInfo?.payType == 1 ? '微信支付' : '' }}</span></div>
    </div>

    <div class="bottomBtn">
      <van-button round @click="gotoNext">完成</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { isPaySuccessOrFail } from '@/api/register'
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/modules/user/index.js';

const userStore = useUserStore()
let orderInfo = ref(null);


onLoad(async (e) => {
  const { data } = await isPaySuccessOrFail(e.orderSn)
  console.log('payresult结果', data)
  orderInfo.value = data;
})


function gotoNext() {
  userStore.getUserInfo()
  uni.switchTab({
    url: '/pages/my/index'
  })
}
</script>

<style lang="less">
::v-deep {
  .van-button {
    position: fixed !important;
    bottom: 65rpx;
    left: 50%;
    width: 670rpx;
    height: 92rpx !important;
    background-color: var(--a-main-color) !important;
    margin-left: -335rpx !important;
    border: none !important;
    color: var(--a-one-text-color) !important;
  }

}

.payStateImg {
  display: block;
  width: 250rpx;
  height: 250rpx;
  margin: 0 auto 0;
}

.payStateText {
  margin-top: 30rpx;
  font-size: 48rpx;
  color: var(--a-two-text-color);
  text-align: center;
}

.payInfoBox {
  box-sizing: border-box;
  width: 690rpx;
  height: 420rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 30rpx;
  margin: 60rpx auto 0;

  .payMoney {
    text-align: center;
    padding: 30rpx 0;
    color: var(--a-one-text-color);

    label {
      font-size: 62rpx;
      font-weight: 400;
    }
  }

  .hr {
    margin: 0 auto 0;
    width: 650rpx;
    height: 0rpx;
    border: 1rpx solid rgba(198, 198, 198, 0.2);
  }

  .payInfo {
    margin: 38rpx 0 0 30rpx;
    font-size: 30rpx;
    color: var(--a-three-text-color);

    label {
      color: var(--a-one-text-color);
    }
  }

  .bottomBtn {}
}

.title {
  color: var(--a-three-text-color);
}

.desc {
  color: var(--a-one-text-color);

}

.title,
.desc {
  font-size: 30rpx;
  font-weight: 400;

  line-height: 41rpx;
}

.title {

  color: #585858;
}
</style>
